<md-content class="md-padding">
   <md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="3" md-cols-gt-md="4" md-row-height-gt-md="1:1"
      md-row-height="1:1" md-gutter="12px" md-gutter-gt-sm="8px">
      <md-grid-tile ng-repeat="cluster in clusters track by cluster.name">
         <md-card>
            <table style="border-collapse:collapse; table-layout:fixed; width:100%;" class="table">
               <col style="width: 30%;">
               <col style="width: 70%;">
               <tr valign="middle">
                  <th ng-click="openCluster(cluster.name)" colspan=2><img ng-click="openCluster(cluster.name)"
                        width=32px src="static/img/database-Schema.png" /> {{cluster.name}}</th>
               </tr>
               <tr>
                  <td>Is Monitored</td>
                  <td>
                     <i class="fas fa-lightbulb" ng-class="cluster.config.monitoringPause ? 'icon-red' : 'icon-green'"/>
                  </td>
               </tr>
               <tr>
                  <td>Topology</td>
                  <td>{{cluster.topology}}</td>
               </tr>
               <tr>
                  <td>Orchestrator</td>
                  <td><span class="label label-info">{{cluster.config.provOrchestrator}}</span></td>
               </tr>

               <tr>
                  <td>Databases</td>
                  <td style=" word-wrap:break-word;overflow: hidden;">{{cluster.dbServers.length}}</td>
               </tr>
               <tr>
                  <td>Proxies</td>
                  <td style=" word-wrap:break-word;overflow: hidden;">{{cluster.proxyServers.length}}</td>
               </tr>
               <tr>
                  <td>Is Down</td>
                  <td>
                     <i class="fas fa-lightbulb" ng-class="{'icon-green' : !cluster.isDown && cluster.isFailable, 'icon-orange': !cluster.isDown && !cluster.isFailable, 'icon-red': cluster.isDown}"/>
                  </td>
               </tr>
               <tr>
                  <td>Is Provisioned</td>
                  <td>
                     <i ng-class="cluster.isProvision ? 'icon-green' : 'icon-red'" class="far fa-hand-point-up"/>
                  </td>
               </tr>
               <tr>
                  <td>SLA</td>
                  <td>{{cluster.uptime}}</td>
               </tr>
            </table>
         </md-card>
      </md-grid-tile>
   </md-grid-list>
</md-content>